<template>

	<view class="page-bg">
		<u-navbar :autoBack="true" :border="false" :placeholder="true">
			<view slot="center" class="fb c3 f16">
				回收统计
			</view>
			
		</u-navbar>
		<view class="f p10" style="background: #fff; ">
			<view class="search-box f f1 ml20">
				<image src="../../static/search-icon.png" style="width: 24px;height: 24px;"></image>
				<u-input border="none" placeholder="请输入信息"></u-input>
			</view>
			<view class="f-s-b ml20 mr20">
				<ms-dropdown-item v-model="value1" :list="list"></ms-dropdown-item>
				<!-- <view class="f16 c3"> -->
				<!-- 全部 -->
				<!-- </view> -->
				<!-- <image src="../../static/drow.png" style="width: 14px; height: 8px; margin-left: 5px;"></image> -->
			</view>

		</view>
		<view class="container">
			<view v-show="value1==0">
				<view class="pie-bg mt10">
					<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
				</view>

				<view class="pie-bg mt10">
					<qiun-data-charts type="column" :opts="columnOpts" :chartData="chartColumnData" />
				</view>
			</view>
			<view v-show="value1==1">
				<view>
					<span class="fb c3 f16">
						2023年6月
					</span>
					<span class="c6 f14 ml10" >
						累计5.5吨
					</span>
				</view>
				<view class="recycle-bg mt10">
					<view class="b-b p12 f-c">
						<u-icon name="account-fill" size="48"></u-icon>
						<view class="ml10 f1">
							<view class="c3 f16">
								回收钢筋
							</view>
							<view class="c6 f14 mt10">
								06月07日  10:30:00
							</view>
						</view>
						<view class="c3 fb f20">
							1.5t
						</view>
					</view>
					<view class="b-b p12 f-c">
						<u-icon name="account-fill" size="48"></u-icon>
						<view class="ml10 f1">
							<view class="c3 f16">
								回收钢筋
							</view>
							<view class="c6 f14 mt10">
								06月07日  10:30:00
							</view>
						</view>
						<view class="c3 fb f20">
							1.5t
						</view>
					</view>
					<view class="b-b p12 f-c">
						<u-icon name="account-fill" size="48"></u-icon>
						<view class="ml10 f1">
							<view class="c3 f16">
								回收钢筋
							</view>
							<view class="c6 f14 mt10">
								06月07日  10:30:00
							</view>
						</view>
						<view class="c3 fb f20">
							1.5t
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	export default {
		components: {
			msDropdownItem
		},
		props: {},
		data() {
			return {
				list: [{
						text: '全部',
						value: 0
					},
					{
						text: '金属类',
						value: 1
					}
				],
				value1: 0,
				chartData: {},
				chartColumnData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				columnOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					},
				}
			};
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
									"name": "玻璃类",
									"value": 50
								}, {
									"name": "塑料类",
									"value": 30
								}, {
									"name": "车辆类",
									"value": 20
								},
								{
									"name": "纸类",
									"value": 18
								}, {
									"name": "家电类",
									"value": 8
								}, {
									"name": "纺织类",
									"value": 8
								}
							]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));

					let res1 = {
						categories: ["玻璃类", "塑料类", "车辆类", "纸类", "家电类", "纺织类"],
						series: [{
							name: "目标值",
							data: [50, 50, 20, 18, 8, 8]
						}]
					};
					this.chartColumnData = JSON.parse(JSON.stringify(res1));
				}, 500);
			},
		}
	};
</script>

<style scoped lang="scss">
	.pie-bg {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 304px;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}

	.search-box {
		height: 32px;
		background: #FAFAFB;
		border-radius: 20px 20px 20px 20px;
		opacity: 1;
	}
	.recycle-bg{
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}
	
</style>